<template>
  <el-card class="record-total" shadow="never" v-loading="loading">
    <div class="card-title">流量统计</div>
    <el-row class="total-header">
      <el-col :span="4"></el-col>
      <el-col :span="5"
        >浏览量（PV）
        <el-tooltip
          effect="dark"
          content="即通常说的Page View(PV)，用户每打开一个网站页面就被记录1次。用户多次打开同一页面，浏览量值累计"
          placement="top"
          :enterable="false"
        >
          <i class="el-icon-info"></i>
        </el-tooltip>
      </el-col>
      <el-col :span="5"
        >访客数（UV）
        <el-tooltip
          effect="dark"
          content="一天之内您网站的独立访客数(以Cookie为依据)"
          placement="top"
          :enterable="false"
        >
          <i class="el-icon-info"></i>
        </el-tooltip>
      </el-col>
      <el-col :span="5"
        >IP数
        <el-tooltip effect="dark" content="一天之内您网站的独立访问IP数" placement="top" :enterable="false">
          <i class="el-icon-info"></i>
        </el-tooltip>
      </el-col>
      <el-col :span="5">
        用户数
        <el-tooltip effect="dark" content="一天之内您网站的访问用户数" placement="top" :enterable="false">
          <i class="el-icon-info"></i>
        </el-tooltip>
      </el-col>
    </el-row>
    <el-row class="total-today">
      <el-col :span="4">今日</el-col>
      <el-col :span="5">{{ todayTotal.pv }}</el-col>
      <el-col :span="5">{{ todayTotal.uv }}</el-col>
      <el-col :span="5">{{ todayTotal.ip }}</el-col>
      <el-col :span="5">{{ todayTotal.user }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4">昨日</el-col>
      <el-col :span="5">{{ yesterdayTotal.pv }}</el-col>
      <el-col :span="5">{{ yesterdayTotal.uv }}</el-col>
      <el-col :span="5">{{ yesterdayTotal.ip }}</el-col>
      <el-col :span="5">{{ yesterdayTotal.user }}</el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      todayTotal: {
        pv: 0,
        uv: 0,
        ip: 0,
        user: 0
      },
      yesterdayTotal: {
        pv: 0,
        uv: 0,
        ip: 0,
        user: 0
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysOperateRecord/pvAndUvAndIpAndUserAmount'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        this.loading = false
        if (data && data.code === '0') {
          this.todayTotal.pv = data.data.tdayPv
          this.yesterdayTotal.pv = data.data.ydayPv
          this.todayTotal.uv = data.data.tdayUv
          this.yesterdayTotal.uv = data.data.ydayUv
          this.todayTotal.ip = data.data.tdayIP
          this.yesterdayTotal.ip = data.data.ydayIP
          this.todayTotal.user = data.data.tdayUser
          this.yesterdayTotal.user = data.data.ydayUser
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.tag-monitor-record {
  .record-total {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    .el-col {
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-right: 1px solid $border-color;
      &:last-child {
        border-right: 0;
      }
      &:first-child {
        text-align: left;
        font-size: 12px;
        color: #797979;
        border-right: 0;
        font-weight: normal;
      }
    }
    .total-header {
      color: #01377e;
      font-size: 15px;
    }
    .total-today {
      color: #000;
      font-size: 18px;
      font-weight: bold;
    }
  }
}
</style>
